<template>
  <div class="page-container">
    <div class="page-content">
      <div class="panel-container">
        <div class="panel-content">
          <div class="panel-title">中废通资讯</div>
          <el-tabs v-model="tabActive" @tab-click="handleTabChange">
            <el-tab-pane v-for="item in tabList" :key="item.value" :label="`${item.label}(${item.num})`" :name="item.value.toString()"> </el-tab-pane>
          </el-tabs>
          <div class="tab-content">
            <div class="list">
              <div class="item" v-for="(item, i) in dataList" :key="item.ID" @click="handleClick(item)">
                <div class="top" v-if="pageNumber === 1 && (i === 1 || i === 0)">置顶</div>
                <div class="new" v-if="pageNumber === 1 && i === 2">
                  <svg-icon icon-class="new" class="icon"></svg-icon>
                </div>
                <div class="title">{{ item.Title }}</div>
                <div class="time">{{ sliceTime(item.AddTime) }}</div>
              </div>
            </div>
          </div>
          <el-pagination
            small
            background
            :current-page="pageNumber"
            :page-size="pageSize"
            :page-sizes="[30]"
            :total="pageTotal"
            @current-change="currentChangeHandle"
            @size-change="sizeChangeHandle"
            layout="total, sizes, prev, pager, next, jumper"
            style="margin-top: 20px; text-align: right"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { apiInfoArr, apiInfoCount } from '@/api/index'

export default {
  name: 'Infomation',
  components: {},
  data() {
    return {
      tabActive: '',
      tabList: [],
      dataList: [],
      pageNumber: 1,
      pageSize: 30,
      pageTotal: 0,
      dataListLoading: false,
    }
  },
  activated() {
    this.$refs.table.doLayout()
  },
  mounted() {
    this.init()
  },
  destroyed() {},
  methods: {
    // 初始化
    init() {
      apiInfoCount().then((res) => {
        const { desc, info } = res
        this.tabList = []

        for (let key in desc) {
          this.tabList.push({
            value: key,
            label: desc[key],
            num: info.find((item) => parseInt(item.Type) === parseInt(key)).num,
          })
          this.tabActive = this.tabList[0].value
        }
      })
      this.getDataList()
    },

    // 获取数据列表
    getDataList() {
      apiInfoArr({ pageNumber: this.pageNumber, pageSize: this.pageSize, cls: this.tabActive }).then((res) => {
        const { info } = res
        this.dataList = info
        this.pageTotal = this.tabList.find((item) => item.value === this.tabActive).num
      })
    },
    handleClick(item) {
      this.$store.dispatch('permission/routeAuthorization', 'InfomationDetail').then((res) => {
        localStorage.setItem('InfomationDetail', JSON.stringify(item))
        this.$bus.$emit('forceUpdate', 'InfomationDetail')
        this.$router.push({
          path: '/infomationDetail',
          query: {
            id: item.ID,
          },
        })
      })
    },
    // 每页数
    sizeChangeHandle(val) {
      this.pageSize = val
      this.pageNumber = 1
      this.getDataList()
    },
    // 当前页
    currentChangeHandle(val) {
      this.pageNumber = val
      this.getDataList()
    },
    // 切换tab
    handleTabChange() {
      this.pageNumber = 1
      this.getDataList()
    },
    sliceTime(time) {
      let result = ''
      if (time) {
        let sTime = time.slice(0, 10)
        if (sTime) {
          result = sTime.replaceAll('-', '/')
        }
      }
      return result
    },
  },
}
</script>
<style lang="scss" scoped>
.list {
  width: 100%;
  height: 610px;
  font-size: 12px;
  line-height: 40px;
  color: #666666;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  overflow: hidden;
  .item {
    width: 50%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-left: 10px;
    padding-right: 50px;
    .top {
      flex-shrink: 0;
      font-size: 14px;
      color: #f92200;
      margin-right: 10px;
      font-weight: bold;
    }
    .new {
      font-size: 28px;
      margin-right: 10px;
    }
    &:hover {
      color: #000000;
      cursor: pointer;
    }
    .title {
      width: calc(100% - 60px);
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
    .time {
      width: 60px;
    }
  }
}
</style>
